<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sliphover</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/prettify.css">
    <link rel="stylesheet" href="css/docs.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
</html>
<body data-spy="scroll" data-target="#docs-navbar" data-offset="81">
  <div class="container">
    <div class="row">
      <div class="span2">
        <div id="docs-navbar" data-spy="affix">
          <div class="row">
            <div class="span2">
              <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#sliphover">SlipHover</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#quick-start">Quick start</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#compatibility">Compatibility</a></li>
<li><a href="#license">License</a></li>
<li><a href="#misc">Misc</a></li>
<li><a href="#changelog">Changelog</a></li>

              </ul>
              <iframe src="http://ghbtns.com/github-btn.html?user=wayou&repo=sliphover&type=watch&count=true"
  allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
              <br>
              <!--  <small class="muted"> <span class="heart">&#9829;</span> buy me cup of <a href="https://github.com/wayou/SlipHover">coffee</a></small> -->
            </div>
          </div>
        </div>
      </div>
      <div class="span10"><h1 id="sliphover-sup-v2-0-0-https-npmjs-org-package-readme-docs-sup-">SlipHover</h1>
<p>You&#39;ll love it when you need to display an image gallery.</p>
<p>SlipHover apply direction aware hover animation for the caption of an image.</p>

<!-- demo begin -->
<div class="demo" id="sliphover">
  <ul>
    <li>
                    <a href="#"><img src="img/1.jpg" title="this is a normal caption" /></a>
                </li>
                <li>
                <a href="#" >
                    <img src="img/2.jpg" title="description goes here" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/3.jpg" title="with html, you can put <a href='#'>link</a> , <input type='button' value='button'> or any other element you want" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/4.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/5.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/6.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/7.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/8.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/9.jpg" title="description for this image" />
                </a>
                </li>
                 <li>
                 <a href="#">
                    <img src="img/10.jpg" title="description for this image" />
                 </a>
                </li>
  </ul>
</div>
<!-- demo end -->

<hr><h2 id="download"><a href="#download" name="download" id="download">Download</a></h2>
<p><a href="https://github.com/Wayou/SlipHover/zipball/master">download zip from GitHub</a></p>
<hr><h2 id="quick-start"><a href="#quick-start" name="quick-start" id="quick-start">Quick start</a></h2>
<p>include the files</p>
<pre class="prettyprint linenums"><code class="lang-html">&lt;script src=&quot;path/to/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;path/to/jquery.sliphover.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<p>call the the plugin on a container as your wish</p>
<pre class="prettyprint linenums"><code class="lang-js">$(&quot;#container&quot;).sliphover();</code></pre>
<p>All done!</p>
<hr><h2 id="options"><a href="#options" name="options" id="options">Options</a></h2>
<p>you can custom the caption by passing options when call the plugin, all available options are listed below.</p>
<p>call the the plugin on a container wish you wish</p>
<pre class="prettyprint linenums"><code class="lang-js">$(&quot;#container&quot;).sliphover({
    option: value,
    option2: value2,
    ...
});</code></pre>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Option</th>
<th>type</th>
<th>default</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>string</td>
<td>100%</td>
<td>The height of the overlay. e.g. <code>200px</code> , <code>50%</code> </td>
<td><a href="./height.html">view</a></td>
</tr>
<tr>
<td>target</td>
<td>string</td>
<td>&#39;img&#39;</td>
<td>Specify witch element the overlay will aplly on. Any valid CSS selector will do.</td>
<td><a href="./target.html">view</a></td>
</tr>
<tr>
<td>caption</td>
<td>string</td>
<td>&#39;title&#39;</td>
<td>Witch attribute will be the content of the overlay. You can use custom HTML5 data attribute. e.g. Also you can write html for the caption  <code>data-caption</code> </td>
<td><a href="./caption.html">view</a></td>
</tr>
<tr>
<td>duration</td>
<td>number/string</td>
<td>&#39;fast&#39;</td>
<td>How long will the animation will be in millisecond, <code>fast</code> equals to <code>200</code> and <code>slow</code> equals to <code>600</code>. You can give you own number. e.g. <code>500</code> </td>
<td><a href="./duration.html">view</a></td>
</tr>
<tr>
<td>fontColor</td>
<td>string</td>
<td>&#39;#fff&#39;</td>
<td>the color of the text within the overlay</td>
<td><a href="./fontcolor.html">view</a></td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string</td>
<td>&#39;rgba(0,0,0,.5)&#39;</td>
<td>The background color of the overlay. Any valid CSS color value will do. Also you can specify individual color for each overlay via the <code>data-background</code> attribute like this<code>data-background="rgba(120,100,240,0.85)"</code></td>
<td><a href="./backgroundcolor.html">view</a>
</td>
</tr>

<tr>
<td>backgroundColorAttr</td>
<td>string</td>
<td>&#39;data-background&#39;</td>
<td>Also you can specify individual color for each overlay via the <code>data-background</code> attribute like this<code>data-background="rgba(120,100,240,0.85)"</code></td>
<td>
	<a href="./differentbackgrounds.html">view</a>
</td>
</tr>
<tr>
<td>reverse</td>
<td>bool</td>
<td>false</td>
<td>whether the animation direction is reversed</td>
<td><a href="./reverse.html">view</a></td>
</tr>
<tr>
<td>textAlign</td>
<td>string</td>
<td>&#39;center&#39;</td>
<td>the horizon align of the caption</td>
<td><a href="./textalign.html">view</a></td>
</tr>
<tr>
<td>verticalMiddle</td>
<td>bool</td>
<td>true</td>
<td>the vertical align of the caption</td>
<td><a href="./textalign.html">view</a></td>
</tr>
<tr>
<td>withLink</td>
<td>bool</td>
<td>true</td>
<td>if image is wraped with a link the overlay will be clickable, set false to disable click</td>
<td></td>
</tr>
</tbody>
</table>

<hr><h2 id="demo"><a href="#demo" name="demo" id="demo">Demo</a></h2>
<p>Besides examples in the option table above, there are a few nice demos shows sliphover can work well with other image gallery plugins such as <a href="http://www.wookmark.com/jquery-plugin">Wookmark</a> , <a href="http://vnjs.net/www/project/freewall/">freewall</a> and <a href="http://isotope.metafizzy.co/">isotope</a> .</p>
<ul>
<li><a href="./wookmark.html">using with wookmark</a></li>
<li><a href="./freewall.html">using with freewall</a></li>
</ul>
<hr><h2 id="compatibility"><a href="#compatibility" name="compatibility" id="compatibility">Compatibility</a></h2>
<p>Requirs jQuery 1.7+.</p>
<p>Works well with all modern browsers and IE9+.</p>
<hr><h2 id="license"><a href="#license" name="license" id="license">License</a></h2>
<p>Licensed under the MIT License</p>
<hr><h2 id="misc"><a href="#misc" name="misc" id="misc">Misc</a></h2>
<p>Bug reporting, suggestion and feature request, please <a href="https://github.com/wayou/SlipHover/issues/new">open issues</a> on the project page.
Pull request are welcome!</p>
<p><strong>About me</strong></p>
<p>I&#39;m a frontend engineer from China and love doing cool stuff with the web. </p>
<ul>
<li>Wayou <a href="&#x6d;&#x61;&#105;&#108;&#116;&#x6f;&#58;&#108;&#105;&#117;&#x77;&#97;&#x79;&#x6f;&#x6e;&#103;&#x40;&#x67;&#109;&#x61;&#105;&#108;&#46;&#x63;&#x6f;&#x6d;">&#108;&#105;&#117;&#x77;&#97;&#x79;&#x6f;&#x6e;&#103;&#x40;&#x67;&#109;&#x61;&#105;&#108;&#46;&#x63;&#x6f;&#x6d;</a></li>
</ul>
<hr><h2 id="changelog"><a href="#changelog" name="changelog" id="changelog">Changelog</a></h2>
<p><strong>v2.0.1</strong></p>
<p>release: 24 Jun 2014</p>
<ul>
<li>support border-radius</li>
</ul>
<p><strong>v2.0.0</strong></p>
<p>release: 15 Jun 2014</p>
<ul>
<li>refactor the implementation</li>
<li>fix window resize issue</li>
<li>support for lazy loading imges</li>
<li>fix the position not correct issue of the overlay</li>
<li>add text vertical align option and horizon align option</li>
<li>removed 3d perspective support in this version</li>
<li>removed the auto scroll option</li>
</ul>
<p><strong>v1.1.7</strong></p>
<p>release: 19 Apr 2014</p>
<ul>
<li>fix publish error</li>
</ul>
<p><strong>v1.1.6</strong></p>
<p>release: 19 Apr 2014</p>
<ul>
<li>fix plugin url</li>
</ul>
<p><strong>v1.1.5</strong></p>
<p>release: 18 Apr 2014</p>
<ul>
<li>fix the jquery data api error</li>
</ul>
<p><strong>v1.1.4</strong></p>
<p>release: 12 Mar 2014</p>
<ul>
<li>border radius support</li>
<li>change the size of the overlay to have the same border radius of the target(most often the target is the images)</li>
<li>clear code and correct spelling</li>
</ul>
<p><strong>v1.1.2</strong></p>
<p>release: 3 Mar 2014</p>
<ul>
<li>fix bug: when images got border the position of the overlay is not correct</li>
<li>fix bug: when position of parents are not static the position of the overlays are not correct</li>
<li>add lecense</li>
<li>introduce new demo pages</li>
</ul>
<p><strong>v1.1.1</strong></p>
<p>release: 12 Feb 2014</p>
<ul>
<li>fix issue #1</li>
<li>upgrade plugin info</li>
<li>upgrade demos</li>
</ul>
<p><strong>v1.1.0</strong></p>
<p>release: 9 Jan 2014</p>
<ul>
<li>implement the 3d flip animation</li>
<li>fixed some bugs</li>
<li>upgrade demos and the documentation</li>
</ul>
<p><strong>v1.0.2</strong></p>
<p>release: 5 Jan 2014</p>
<ul>
<li>upgrade jquery plugin info</li>
<li>fixed bugs</li>
</ul>
<p><strong>v1.0.1</strong></p>
<p>release: 5 Jan 2014</p>
<ul>
<li>upgrade demo page</li>
</ul>
<p><strong>v1.0.0</strong></p>
<p>release: 4 Jan 2014</p>
<ul>
<li>main features are completed and known issues are fixed</li>
<li>add a jquery plugin json file to publish this plugin to the jquery plugin center</li>
</ul>

      </div>
    </div>
  </div>
  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script src="js/vendor/prettify.js"></script>
  <script src="js/vendor/jquery.ba-hashchange.js"></script>
  <script src="js/vendor/jquery.scrollTo.js"></script>
  <script src="js/vendor/bootstrap-adjust-hash.js"></script>
  <script src="js/jquery.sliphover.min.js"></script>
  <script src="js/main.js"></script>

  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46794744-6', 'auto');
  ga('send', 'pageview');

</script>
</body>
